<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        {{ integralGrade.id ? '编辑积分等级' : '新增积分等级' }}
      </h2>
    </div>

    <!-- 表单卡片 -->
    <div class="form-card">
      <el-form
        :model="integralGrade"
        :rules="rules"
        ref="integralGradeForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="借款额度" prop="borrowAmount">
          <el-input-number
            v-model.number="integralGrade.borrowAmount"
            :min="0"
            :precision="2"
            controls-position="right"
            class="form-input"
          />
        </el-form-item>

        <el-form-item label="积分区间开始" prop="integralStart">
          <el-input-number
            v-model.number="integralGrade.integralStart"
            :min="0"
            controls-position="right"
            class="form-input"
          />
        </el-form-item>

        <el-form-item label="积分区间结束" prop="integralEnd">
          <el-input-number
            v-model.number="integralGrade.integralEnd"
            :min="0"
            controls-position="right"
            class="form-input"
          />
        </el-form-item>

        <el-form-item label="积分区间验证" prop="intervalValid">
          <div class="interval-validator" :class="{ 'invalid': intervalInvalid }">
            {{ intervalMessage }}
          </div>
        </el-form-item>

        <el-form-item class="form-actions">
          <el-button
            :disabled="saveBtnDisabled"
            type="primary"
            size="medium"
            icon="el-icon-check"
            @click="saveOrUpdate"
            class="action-button"
          >
            {{ saveBtnDisabled ? '保存中...' : '保存' }}
          </el-button>

          <el-button
            size="medium"
            icon="el-icon-back"
            @click="backToList"
            class="action-button"
          >
            返回
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import integralGradeApi from '@/api/core/integral-grade'

export default {
  data() {
    return {
      integralGrade: {
        borrowAmount: 0,
        integralStart: 0,
        integralEnd: 0
      },
      saveBtnDisabled: false,
      rules: {
        borrowAmount: [
          { required: true, message: '请输入借款额度', trigger: 'blur' },
          { type: 'number', message: '借款额度必须为数字值', trigger: 'blur' }
        ],
        integralStart: [
          { required: true, message: '请输入积分区间开始值', trigger: 'blur' },
          { type: 'number', message: '积分区间开始值必须为数字值', trigger: 'blur' }
        ],
        integralEnd: [
          { required: true, message: '请输入积分区间结束值', trigger: 'blur' },
          { type: 'number', message: '积分区间结束值必须为数字值', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.$route.params.id) {
      this.fetchDataById(this.$route.params.id)
    }
  },
  computed: {
    intervalInvalid() {
      return (
        this.integralGrade.integralStart !== undefined &&
        this.integralGrade.integralEnd !== undefined &&
        this.integralGrade.integralStart >= this.integralGrade.integralEnd
      )
    },
    intervalMessage() {
      if (this.intervalInvalid) {
        return '积分区间开始值必须小于结束值'
      } else if (this.integralGrade.integralStart !== undefined && this.integralGrade.integralEnd !== undefined) {
        return '积分区间设置有效'
      } else {
        return '请设置有效的积分区间'
      }
    }
  },
  watch: {
    // 监听积分区间变化，实时验证
    'integralGrade.integralStart': 'validateInterval',
    'integralGrade.integralEnd': 'validateInterval'
  },
  methods: {
    saveOrUpdate() {
      this.$refs.integralGradeForm.validate(valid => {
        if (valid) {
          if (this.intervalInvalid) {
            this.$message.error('积分区间设置无效，请确保开始值小于结束值')
            return
          }

          this.saveBtnDisabled = true
          if (!this.integralGrade.id) {
            this.saveData()
          } else {
            this.updateData()
          }
        } else {
          this.$message.error('请完成表单验证')
          return false
        }
      })
    },
    saveData() {
      integralGradeApi.save(this.integralGrade).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.$router.push('/core/integral-grade/list')
      }).catch(error => {
        this.saveBtnDisabled = false
        this.$message.error('保存失败: ' + error.message)
      })
    },
    fetchDataById(id) {
      integralGradeApi.getById(id).then(response => {
        this.integralGrade = response.data.record
      }).catch(error => {
        this.$message.error('获取数据失败: ' + error.message)
      })
    },
    updateData() {
      integralGradeApi.updateById(this.integralGrade).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.$router.push('/core/integral-grade/list')
      }).catch(error => {
        this.saveBtnDisabled = false
        this.$message.error('更新失败: ' + error.message)
      })
    },
    validateInterval() {
      this.$refs.integralGradeForm.validateField('intervalValid')
    },
    backToList() {
      this.$router.push('/core/integral-grade/list')
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

// 页面头部样式
.page-header {
  margin-bottom: 20px;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2d3d;
    margin-bottom: 10px;
  }
}

// 表单卡片样式
.form-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
}

// 表单输入框样式
.form-input {
  width: 300px;

  ::v-deep .el-input-number {
    width: 100%;
  }
}

// 积分区间验证提示样式
.interval-validator {
  padding: 6px 0;
  font-size: 14px;

  &.invalid {
    color: #f56c6c;
  }
}

// 表单操作按钮样式
.form-actions {
  display: flex;
  gap: 15px;

  .action-button {
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-1px);
    }
  }
}

// 表单验证动画
::v-deep .el-form-item.is-error .el-input__inner {
  animation: shake 0.3s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}
</style>
